<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="分类名称" prop="sortName">
            <el-input v-model="queryParams.sortName" placeholder="请输入分类名称" clearable style="width: 240px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="approval">
            <el-select v-model="queryParams.approval" placeholder="分类状态" clearable style="width: 240px">
              <el-option v-for="dict in dict.type.approval_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker> -->
            申请时间
            <el-date-picker v-model="startDate" type="date" style="width: 240px" value-format="yyyy-MM-dd"
              placeholder="申请时间" :picker-options="pickerOptions" @change="handleDateSelection"></el-date-picker>
            至 审批时间
            <el-date-picker v-model="endDate" type="date" style="width: 240px" value-format="yyyy-MM-dd"
              placeholder="审批时间" :disabled="!startDate" @change="handleDateSelection"></el-date-picker>

            <!-- :editable-date="!maxDate" -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="sortList">
          <el-table-column prop="sortId" align="center" label="编号" width="190"></el-table-column>
          <el-table-column prop="icon" align="center" label="分类图标" width="190">
            <template slot-scope="scope">
              <img :src="scope.row.icon" width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column prop="sortName" align="center" label="分类名称" width="190"></el-table-column>
          <el-table-column prop="approval" align="center" label="审批状态" width="190">
            <template slot-scope="scope">
              <span v-if="scope.row.approval == 0" class="spanColor1">{{ getOrderType(scope.row.approval) }}</span>
              <span v-if="scope.row.approval == 1" class="spanColor2">{{ getOrderType(scope.row.approval) }}</span>
              <span v-if="scope.row.approval == 2" class="spanColor3">{{ getOrderType(scope.row.approval) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="申请时间" width="190"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="审批时间" width="190"
            :formatter="changeUpdateTime"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-query" @click="handleList(scope.row)"
                v-hasPermi="['sort:sort:query']">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 查看用户信息窗口 -->
    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
      <el-form ref="form" :model="form" label-width="130px" style="width: 400px">
        <el-row>
          <el-col :span="25">
            <el-form-item label="预览效果：">
              <div class="container222">
                <img :src="srcWg" class="srcWg">
                <div class="tabBody">
                  <div class="tabIcon"><img :src="form.icon" width="70" height="70" /></div>
                  <div class="tabTitle">{{ form.sortName }}</div>
                </div>
                <div class="tabBody1">
                  <div class="tabIcon1"><img :src="form.icon" width="70" height="70" /></div>
                  <div class="tabTitle1">{{ form.sortName }}</div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="审批状态：" prop="approval">
              <span v-if="form.approval == 0" class="spanColor1">{{ getOrderType(form.approval) }}</span>
              <span v-if="form.approval == 1" class="spanColor2">{{ getOrderType(form.approval) }}</span>
              <span v-if="form.approval == 2" class="spanColor3">{{ getOrderType(form.approval) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="form.approval == 0 || form.approval == 2" type="primary" @click="resetApproval(form)"
          v-hasPermi="['sort:sort:edit']">重新审批</el-button>
        <el-button v-if="form.approval == 1" type="primary" @click="approval(form)"
          v-hasPermi="['sort:sort:edit']">审批通过</el-button>
        <el-button v-if="form.approval == 1" type="primary" style="background: red" @click="reject(form)"
          v-hasPermi="['sort:sort:edit']">驳回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  editApproval, getSortById, listSortSecondarys
  , editReject, resetApproval
} from "@/api/products/product";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getUser } from "@/api/system/user";

export default {
  name: "User",
  dicts: ["sys_normal_disable", "approval_status"],
  components: { Treeselect },
  data() {
    return {
      tableData: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分类表格数据
      sortList: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      startDate: "",
      endDate: "",
      srcWg: process.env.VUE_APP_IMG_BASE_URL + 5995,
      pickerOptions: {
        disabledDate(date) {
          return date && date > new Date();
        },
        // shortcuts: [
        //   {
        //     text: "今天",
        //     onClick(picker) {
        //       picker.$emit("pick", new Date());
        //     },
        //   },
        //   {
        //     text: "昨天",
        //     onClick(picker) {
        //       const date = new Date();
        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
        //       picker.$emit("pick", date);
        //     },
        //   },
        // ],
      },
      maxDate: "",
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getOrderType(row) {
      let str = ''
      if (row == 0) {
        str = '审批通过'
      } else if (row == 1) {
        str = '待审批'
      } else if (row == 2) {
        str = '已被驳回'
      } else {
        str = '错误'
      }
      return str
    },
    /** 审批通过 */
    approval(row) {
      this.$modal.confirm('是否确认审批通过名称为"' + row.sortName + '"的数据项？').then(function () {
        return editApproval(row.sortId);
      }).then(() => {
        this.getList();
        this.open = false;
        this.$modal.msgSuccess("审批成功");
      }).catch(() => { });
    },
    /** 重新审批*/
    resetApproval(row) {
      this.$modal.confirm('是否确认重新审批通过名称为"' + row.sortName + '"的数据项？').then(function () {
        return resetApproval(row.sortId)
      }).then(() => {
        this.getList();
        this.open = false;
        this.$modal.msgSuccess("审批成功");
      }).catch(() => { });
    },
    /** 驳回*/
    reject(row) {
      this.$modal.confirm('是否确认驳回名称为"' + row.sortName + '"的数据项？').then(function () {
        return editReject(row.sortId);
      }).then(() => {
        this.getList();
        this.open = false;
        this.$modal.msgSuccess("驳回成功");
      }).catch(() => { });
    },
    /**存放日期时间 */
    handleDateSelection() {
      // if (this.startDate) {
      //   this.maxDate = new Date(this.startDate);
      //   this.maxDate.setDate(this.maxDate.getDate() + 30); // 最多限制选择30天
      // }
      if (this.endDate && this.endDate < this.startDate) {
        this.endDate = "";
      }
      this.dateRange = [this.startDate, this.endDate];
    },
    changeUpdateTime(row) {
      if (!row.updateTime) {
        return '暂未审批';
      } else {
        return row.updateTime;
      }
    },
    /** 查询分类列表 */
    getList() {
      this.loading = true;
      listSortSecondarys(this.addDateRange(this.queryParams, this.dateRange)).then(
        (res) => {
          this.sortList = res.data.content;
          this.sortList.forEach((item) => {
            if (
              item.icon != undefined &&
              item.icon != "" &&
              item.icon != null
            ) {
              if (item.icon.length > 4) {
                let arr = item.icon.split(",");
                item.icon =
                  process.env.VUE_APP_IMG_BASE_URL + parseInt(arr[0]);
              } else {
                item.icon =
                  process.env.VUE_APP_IMG_BASE_URL + parseInt(item.icon);
              }
            }
          })
          this.total = res.data.totalSize;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.roleOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        sortId: undefined,
        sortName: undefined,
        approval: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      // this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    /**单查用户按钮操作 */
    handleList(row) {
      this.reset();
      const sortId = row.sortId;
      getSortById(sortId).then((response) => {
        this.form = response.data;
        if (
          this.form.icon != undefined &&
          this.form.icon != "" &&
          this.form.icon != null
        ) {
          if (this.form.icon.length > 4) {
            let arr = this.form.icon.split(",");
            this.form.icon =
              process.env.VUE_APP_IMG_BASE_URL + parseInt(arr[0]);
          } else {
            this.form.icon =
              process.env.VUE_APP_IMG_BASE_URL + parseInt(this.form.icon);
          }
        }
        this.open = true;
        this.title = "查看分类";
        // this.form.password = "";
      });
    },
  },
};
</script>
<style lang="scss">
/*去掉表格单元格边框*/
.customer-no-border-table th {
  border: none;
}

.customer-no-border-table td,
.customer-no-border-table .no-border,
.customer-no-border-table th.is-leaf {
  border: none;
  border-bottom: none;
  padding-bottom: none;
}

.no-border {
  border-bottom: none !important;
}

/*表格最外边框*/
.customer-no-border-table .el-table--border,
.el-table--group {
  border: none;
}

.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 0px solid #dfe6ec;
}

/* 去除表格的边框 */
.table_box td.el-table__cell {
  border: none;
}

.table_box th.el-table__cell {
  border: none;
}

.user_box .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
}

.el-table::before {
  background: none;
}

.el-table__row>td {
  border: none;
}

.el-table::before {
  height: 0px;
}

div .el-table--border::after,
div .el-table--group::after,
div .el-table::before {
  background-color: transparent;
}

.ivu-table:before,
.ivu-table:after {
  background: white;
}

.ivu-table td,
.ivu-table th {
  border-bottom: 0px solid white;
}

.ivu-table-wrapper {
  border: none;
}

.container222 {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;

  .srcWg {
    width: 200px;
    height: 200px;
  }

  .tabBody {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -130%);
    width: 79.146px;
    height: 37.689px;
    display: flex;
    flex-direction: row;
    border-radius: 31.407px;
    background: rgba(237, 181, 166, 1);

    img {
      width: 21.985px;
      height: 21.985px;
    }

    .tabIcon {
      padding-top: 7.852px;
      margin-left: 15px;
    }

    .tabTitle {
      margin: auto;
      margin-right: 10px;
      width: 40px;
      height: 17.588px;
      line-height: 17.588px;
      font-size: 10px;
      text-align: center;
      color: white;
    }
  }

  .tabBody1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 15%);
    width: 79.146px;
    height: 37.689px;
    display: flex;
    flex-direction: row;
    border-radius: 31.407px;
    background: white;

    img {
      width: 21.985px;
      height: 21.985px;
    }

    .tabIcon1 {
      padding-top: 7.852px;
      margin-left: 15px;
    }

    .tabTitle1 {
      margin: auto;
      margin-right: 10px;
      width: 40px;
      height: 17.588px;
      line-height: 17.588px;
      font-size: 10px;
      text-align: center;
      color: rgba(166, 166, 166, 1);

    }
  }
}

.spanColor1 {
  color: green;
}

.spanColor2 {
  color: orange;
}

.spanColor3 {
  color: red;
}
</style>
